<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <label style="margin-right: 5px">商家名：</label>
        <el-input v-model="name" placeholder="请输入商家名" style="width: 15%" clearable @clear="getEmployeePage"
          @keyup.enter="getEmployeePage" />
        <el-button type="primary" style="margin-left: 10px" @click="getEmployeePage">查询</el-button>
        <div style="float: right">
          <el-button type="primary" @click="employeeHandle"> 添加商家 </el-button>
        </div>
      </div>
    </template>
    <el-table :data="employees" style="width: 100%">
      <el-table-column prop="name" label="商家名" />
      <el-table-column prop="username" label="账号" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="idNumber" label="身份证号" />
      <el-table-column label="账号状态">
        <template #default="{ row }">
          <div class="status" :class="{ 'stop-status': row.status === 0 }">
            {{ row.status === 0 ? '禁用' : '启用' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间" />
      <el-table-column label="操作" width="160" align="center">
        <template #default="{ row }">
          <!-- <el-button size="small" @click="employeeHandle(row)">查看</el-button> -->
          <el-button :type="row.status == 1 ? 'danger' : 'success'" size="small" @click="statusHandle(row)">
            {{ row.status == 1 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty />
      </template>
    </el-table>
    <template #footer>
      <!-- 分页条 -->
      <Pagination :page="page" :pageSize="pageSize" :total="total" @onSizeChange="onSizeChange"
        @onPageChange="onPageChange" />
    </template>
  </el-card>
</template>
<script setup lang="ts">
import Pagination from '@/components/Pagination/index.vue'
import { getBusinessPageAPI, postBusinessStatusAPI } from '@/api/admin/business'
import { EmployeeResult } from '@/types/employee'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { useUserStore } from '@/stores/userStore'
// const userStore = useUserStore()
// 姓名
const name = ref('')
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 员工列表
const employees = ref<EmployeeResult[]>([])

// 员工分页查询
const getEmployeePage = async () => {
  let pageParams = {
    page: page.value,
    pageSize: pageSize.value,
    name: name.value ? name.value : undefined,
  }
  try {
    const { data } = await getBusinessPageAPI(pageParams)
    employees.value = data.records
    total.value = data.total
  } catch (error) {
    console.log(error)
  }
}
onMounted(async () => {
  await getEmployeePage()
})
//当每页条数发生了变化，调用此函数
const onSizeChange = (num: number) => {
  pageSize.value = num
  getEmployeePage()
}
//当前页码发生变化，调用此函数
const onPageChange = (num: number) => {
  page.value = num
  getEmployeePage()
}
// 启用、禁用员工账号
const statusHandle = (row: EmployeeResult) => {
  const id = row.id
  const status = row.status

  ElMessageBox.confirm('确认要执行此操作吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await postBusinessStatusAPI(!status ? 1 : 0, id)
    getEmployeePage()
    ElMessage.success({
      type: 'success',
      message: '修改状态成功',
    })
  })
}
const router = useRouter()
// 添加/修改员工信息
const employeeHandle = () => {
  router.push({ path: '/business/detail' })
}
</script>
<style scoped lang="scss"></style>
